<template>
	<div class="mine padding">
		<head-top head-title="我的"></head-top>
		<!-- <section class="profile-1reTe">
			<router-link class="toLogin" tag="div" :to="{path: '/login'}">
				<div class="svg-mine">
					<svg class="icon-svg" fill="#cccccc">
						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mine"></use>
					</svg>
				</div>
				<div class="login">点击登录</div>
			</router-link>
			<div class="mine-info">
				
			</div>
		</section> -->
		
		<section class="profile-number">
			<router-link :to="userInfo&&userInfo.user_id? '/userinfo' : '/login'" class="profile-link">
				<img :src="imgBaseUrl + userInfo.head_img" class="privateImage" v-if="userInfo&&userInfo.user_id">
				<span class="privateImage" v-else>
					<svg class="privateImage-svg">
						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#avatar-default"></use>
					</svg>
				</span>
				<div class="user-info">
					<p>{{username}}</p>
					<p>
						<span class="icon-mobile-number">{{mobile}}</span>
					</p>
				</div>
				<span class="arrow">
					<svg class="arrow-svg">
						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#right"></use>
					</svg>
				</span>
			</router-link>
		</section>

		<section class="profile-1reTe">
			<!-- 我的订阅 -->
			<router-link :to="userInfo&&userInfo.user_id? '/mysubs' : '/login'" class="myorder">
				<aside>
					<svg class="icon-svg" fill="#f86254">
						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#like"></use>
					</svg>
				</aside>
				<div class="myorder-div">
					<span>我的订阅</span>
					<span class="myorder-divsvg">
						<svg class="icon-svg" fill="ccc">
							<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#right"></use>
						</svg>
					</span>
				</div>
			</router-link>
			<!-- 我的收藏 -->
			<router-link :to="userInfo&&userInfo.user_id? '/mycolle' : '/login'" class="myorder">
				<aside>
					<svg class="icon-svg" fill="#f86254">
						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#favor-active"></use>
					</svg>
				</aside>
				<div class="myorder-div">
					<span>我的收藏</span>
					<span class="myorder-divsvg">
						<svg class="icon-svg" fill="ccc">
							<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#right"></use>
						</svg>
					</span>
				</div>
			</router-link>
			<!-- 个人信息 -->
			<router-link :to="userInfo&&userInfo.user_id? '/userinfo' : '/login'" class="myorder">
				<aside>
					<svg class="icon-svg" fill="#f86254">
						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#profile"></use>
					</svg>
				</aside>
				<div class="myorder-div">
					<span>个人信息</span>
					<span class="myorder-divsvg">
						<svg class="icon-svg" fill="ccc">
							<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#right"></use>
						</svg>
					</span>
				</div>
			</router-link>
		</section>
		<!-- <section class="profile-1reTe"> -->
			<!-- 密码修改 -->
			<!-- <router-link to='/password' class="myorder">
				<aside>
					<svg class="icon-svg" fill="#f86254">
						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#password"></use>
					</svg>
				</aside>
				<div class="myorder-div">
					<span>密码修改</span>
					<span class="myorder-divsvg">
						<svg class="icon-svg" fill="ccc">
							<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#right"></use>
						</svg>
					</span>
				</div>
			</router-link>
		</section> -->
	</div>
</template>

<script>
	import {imgBaseUrl} from '@/api'
	import headTop from '@/components/header/head'
	import footGuide from '@/components/footer/footGuide'
	import {mapState, mapMutations} from 'vuex'
	// import {imgBaseUrl} from '@/config/env'
	// import {getImgPath} from '@/components/common/mixin'

	export default {
		data(){
			return{
				username: '登录/注册',			  //用户名
				mobile: '暂无绑定手机号',			//电话号码
				imgBaseUrl,
			}
		},
		mounted(){
			this.initData();
		},
		// mixins: [getImgPath],
		components:{
			headTop,
			footGuide,
		},

		computed:{
			...mapState([
				'userInfo',
			]),
		},

		methods:{
			...mapMutations([
				'SAVE_AVANDER'
			]),
			initData(){
				if (this.userInfo && this.userInfo.user_id) {
					this.username = this.userInfo.username;
					this.mobile = this.userInfo.mobile || '暂无绑定手机号';
				}else{
					this.username = '登录/注册';
					this.mobile = '暂无绑定手机号';
				}
			},
		},
		watch: {
			userInfo: function (value){
				this.initData()
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
   @import 'src/style/mixin';
   .toLogin {
	   width: 50%;
	   margin: 0 auto;
	   padding: 0.5rem 0;
	   display: flex;
	   .svg-mine {
		   width: 2rem;
		   height: 2rem;
		   border: 1px solid #f86254;
		   border-radius: 50%;
		   .icon-svg {
			   margin-top: 20%;
			   margin-left: 20%;
			   width: 60%;
			   height: 60%;
		   }
	   }
	   .login {
		   line-height: 2rem;
		   padding-left: 0.5rem;
		   font-size: 0.7rem;
	   }
   }
   .profile-number{
        padding-top:0.4rem;
        .profile-link{
            display:block;
            display:flex;
            box-align: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            background:#fff;
            padding: .666667rem .6rem;
            .privateImage{
                display:inline-block;
                @include wh(2.5rem,2.5rem);
                border-radius:50%;
                vertical-align:middle;
                .privateImage-svg{
                    background:$fc;
                    border-radius:50%;
                    @include wh(2.5rem,2.5rem);
                }
            }
            .user-info{
                margin-left:.48rem;
                -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                flex-grow: 1;
                p{
                    font-weight:700;
					@include sc(.8rem,#333);
					font-size: 0.8rem;
                    .user-icon{
                        @include wh(0.5rem,0.75rem);
                        display:inline-block;
                        vertical-align:middle;
                        line-height:0.75rem;
                        .icon-mobile{
                            @include wh(100%,100%);
                        }
                    }
                    .icon-mobile-number{
                        display:inline-block;
                        @include sc(.57333rem,#333);
                    }
                }

            }
            .arrow{
                @include wh(.46667rem,.98rem);
                display:inline-block;
                svg{
                   @include wh(100%,100%);
                }
            }
        }
   }
   .profile-1reTe{
        margin-top:.4rem;
        background:$fc;
        .myorder{
            padding-left:1.6rem;
            display:flex;
			align-items: center;
            aside{
                @include wh(.7rem,.7rem);
                margin-left:-.866667rem;
                margin-right:.266667rem;
                display:flex;
                align-items: center;
                svg{
                    @include wh(100%,100%);
                }
            }
            .myorder-div{
                width:100%;
                border-bottom:1px solid #f1f1f1;
                padding:.6rem .266667rem .6rem 0;
                @include sc(.7rem,#333);
                display:flex;
                justify-content:space-between;
                span{
					display:block;
					font-size: 0.6rem;
                }
                .myorder-divsvg{
                    @include wh(.46667rem,.466667rem);
                    svg{
                        @include wh(100%,100%);
                    }
                }
            }
        }
        .myorder:nth-of-type(3) .myorder-div{
            border:0;
        }
    }
</style>
